<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="property-verification flex flex-col h-full gap-y-3">
    <div class="flex justify-between items-center">
        <div class="font-bold">Verification</div>
        <div>
            <button
                mat-icon-button
                class="primary-icon-button"
                type="button"
                [disabled]="disabled"
                (click)="verifyClicked()">
                <i class="fa fa-check"></i>
            </button>
        </div>
    </div>
    <div class="h-full border p-2 overflow-y-auto">
        @if (disabled) {
            <div></div>
        } @else if (isVerifying) {
            <div class="empty">Verifying properties...</div>
        } @else if (results.length > 0) {
            <div class="verification-results flex flex-col gap-y-2">
                @for (result of results; track results) {
                    <div>
                        <div class="flex gap-x-1">
                            @switch (result.outcome) {
                                @case (Outcome.SUCCESSFUL) {
                                    <div class="fa fa-check success-color-default text-xl"></div>
                                }
                                @case (Outcome.FAILED) {
                                    <div class="fa fa-times error-color text-xl"></div>
                                }
                                @case (Outcome.SKIPPED) {
                                    <div class="fa fa-exclamation error-color text-xl"></div>
                                }
                            }
                            <div class="flex flex-col">
                                <div class="font-bold">{{ result.verificationStepName }}</div>
                                <div class="verification-explanation text-sm opacity-80">{{ result.explanation }}</div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        } @else {
            <div class="empty">Click the button above to verify this component.</div>
        }
    </div>
</div>
